<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文档处理</title>
	<style>
		/*div{
			width: 200px;
			height: 200px;
			background: yellow;
			border: 1px solid black;

		}*/
	</style>
</head>
<body>
	<!-- <b>ooo</b> -->
	<!-- <p>I would I like to say:</p>
	<p>I would I like to say:</p>
	<span>frughjd</span> -->
	<!-- <p>I would I like to say:</p> -->
	<!-- <p><b>hehe</b></p> -->
	<!-- <b class="f">hai</b>
	<b class="f">good</b> -->
	<div class="container">
		<div class="inner first">hello</div>
		<div class="inner second">goobye</div>
		<div class="inner third">Goodbye</div>
	</div>

	<!-- <p>hello,<span>person</span><a href="#">and person</a></p>
 -->
 <!-- <p class="hello">hello</p>how are <p>you?</p> -->

 <b>hello</b><p>,how are you?</p>
 <button>clone me</button>
</body>
</html>
<script src="jquery-3.3.1.min.js"></script>
<script>
	// $("p").append("<b>hello</b>");

	//appendTo(content) 使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中

	// $("p").appendTo("div");

    // 新建段落追加div中并加上一个class
    //在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法，
    // $("<p/>")
    // .appendTo("div")
    // .addClass("test")
    // .end()
    // .addClass("test2");

    //prepend(content)向每个匹配的元素内部前置内容。
    //function(index, html) index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

    // $("p").prepend("hello");

    // 将一个DOM元素前置入所有段落
    // $("p").prepend($(".f")[0]);

    //prepend(content)向每个匹配的元素内部前置内容。
    // $("p").prepend($("b"));
  
    //在所有段落之后插入一些HTML标记代码。
    // $("p").after("hello");

    // $("p").after($(".f")[1]);
    // $("p").append($(".f")[1]);

    // $("p").after($("b"));



     //wrap(html|element|fn)把所有匹配的元素用其他元素的结构化标记包裹起来。
     
     //把所有的段落用一个新创建的div包裹起来
     // $("p").wrap("<div class='wrwap'></div>");

     //用ID是"content"的div将每一个段落包裹起来
     // $("p").wrap(document.getElementById('content'));


     //回调函数 描述:用原先div的内容作为新div的class，并将每一个元素包裹起来
     // $('.inner').wrap(function(){
     // 	return '<div class="' + $(this).text() + '"/>';
     //  });


     // $("p").wrapAll("<div></div>");
       

       //wrapInner(htm|element|fnl)将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
       //把所有段落内的每个子内容加粗
     // $("p").wrapInner("<b></b>");

     //用原先div的内容作为新div的class，并将每一个元素包裹起来
     // $('.inner').wrapInner(function(){
     // 	return '<div class="' + $(this).text() + '/>';
     // });????



     //replaceWith(content|fn)将所有匹配的元素替换成指定的HTML或DOM元素。
     // $("p").replaceWith("<b>Paragraph.</b>");
      
      //用第一段替换第三段(移动到目标位置来替换)
      // $('.third').replaceWith($('.first'));


      //用匹配的元素替换掉所有 selector匹配到的元素。
      // $("<b>yes.</b>").replaceAll("p");


      //empty()删除匹配的元素集合中所有的子节点。
      //把所有段落的子元素（包括文本节点）删除
      // $("p").empty();

      
      //remove([expr])从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
      // $("p").remove();

      //从DOM中把带有hello类的段落删除
      // $('p').remove(".hello");


      //detach([expr])从DOM中删除所有匹配的元素这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
      // $("p").detach();


      //clone([Even[,deepEven]])克隆匹配的DOM元素并且选中这些克隆的副本。
      //一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

      //克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有p段落中。
      // $('b').clone().prependTo("p");

     // //创建一个按钮，他可以复制自己，并且他的副本也有同样功能。
     // $('button').click(function(){
     // 	$(this).clone(true).insertAfter(this);
     // });




      





</script>